<section>
  <header><h3>基本样式</h3></header>
  <article>
    <table class="table" style="text-align:center">
      <tbody>
        <tr>
          <th width="200px">标签</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>
            <h1><span class="label">New</span></h1>
          </td>
          <td>h1</td>
        </tr>
        <tr>
          <td>
            <h2><span class="label">New</span></h2>
          </td>
          <td>h2</td>
        </tr>
        <tr>
          <td>
            <h3><span class="label">New</span></h3>
          </td>
          <td>h3</td>
        </tr>
        <tr>
          <td>
            <h4><span class="label">New</span></h4>
          </td>
          <td>h4</td>
        </tr>
        <tr>
          <td>
            <h5><span class="label">New</span></h5>
          </td>
          <td>h5</td>
        </tr>
        <tr>
          <td>
            <h6><span class="label">New</span></h6>
          </td>
          <td>h6</td>
        </tr>
      </tbody>
    </table>    
  </article>
</section>

<section>
  <header><h3>徽标</h3></header>
  <article>
    <p><code>.label-badge</code></p>
    <div class="example" contenteditable="true">
      <span class="label label-badge">12</span> <span class=
      "label label-badge label-primary">Primary</span> <span class=
      "label label-badge label-success">Success</span> <span class=
      "label label-badge label-info">Info</span> <span class=
      "label label-badge label-warning">Warning</span> <span class=
      "label label-badge label-danger">Danger</span>
    </div>
    <p>小圆点徽标</p>
    <div class="example" contenteditable="true">
      <span class="label label-dot">12</span> <span class=
      "label label-dot label-info">Info</span> <span class=
      "label label-dot label-warning">Warning</span> <span class=
      "label label-dot label-danger">Danger</span>
    </div>
    <p>按钮中的徽标</p>
    <div class="example" contenteditable="true">
      <button class="btn">列表 <span class="label label-badge">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-badge label-primary">12</span></button> <button class="btn">处理错误
      <span class="label label-badge label-success">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-badge label-info">12</span></button> <button class="btn">处理错误
      <span class="label label-badge label-warning">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-badge label-danger">12</span></button>
      <br>
      <br>
      <button class="btn btn-primary">联系人 <span class=
      "label label-badge">12</span></button> <button class="btn btn-success">联系人
      <span class="label label-badge">12</span></button> <button class=
      "btn btn-info">联系人 <span class="label label-badge">12</span></button>
      <button class="btn btn-warning">联系人 <span class=
      "label label-badge">12</span></button> <button class="btn btn-danger">联系人
      <span class="label label-badge">12</span></button>
      <br>
      <br>
      <button class="btn">列表 <span class="label label-dot">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-dot label-primary">12</span></button> <button class="btn">处理错误
      <span class="label label-dot label-success">12</span></button> <button class=
      "btn">处理错误 <span class="label label-dot label-info">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-dot label-warning">12</span></button> <button class="btn">处理错误
      <span class="label label-dot label-danger">12</span></button>
      <br>
      <br>
      <button class="btn btn-primary">联系人 <span class=
      "label label-dot">12</span></button> <button class="btn btn-success">联系人
      <span class="label label-dot">12</span></button> <button class=
      "btn btn-info">联系人 <span class="label label-dot">12</span></button>
      <button class="btn btn-warning">联系人 <span class=
      "label label-dot">12</span></button> <button class="btn btn-danger">联系人
      <span class="label label-dot">12</span></button>
    </div>
    <p>列表组中的徽标和标签</p>
    <div class="example list-group" contenteditable="true">
      <a href="#" class="list-group-item">用div &gt; a实现，实现整行点击 <span class=
      "label label-primary">Primary</span></a> <a href="#" class=
      "list-group-item">todo</a> <a href="#" class="list-group-item">story
      <span class="label label-badge label-primary">Primary</span></a> <a href="#"
      class="list-group-item active">task active</a> <a href="#" class=
      "list-group-item">bug <span class=
      "label label-badge label-warning">Warning</span></a> <a href="#" class=
      "list-group-item">case <span class=
      "label label-badge label-danger pull-right">123</span></a>
    </div>    
  </article>
</section>

<section>
  <header>
    <h3>标签和徽标的颜色</h3>
  </header>
  <article>
    <table class="table" style="text-align:left">
      <tbody>
        <tr>
          <th width="200px">标签</th>
          <th>描述</th>
        </tr>
        <tr>
          <td><span class="label">Default</span></td>
          <td><code>.label-default</code></td>
        </tr>
        <tr>
          <td><span class="label label-primary">Primary</span></td>
          <td><code>.label-primary</code></td>
        </tr>
        <tr>
          <td><span class="label label-success">Success</span></td>
          <td><code>.label-success</code></td>
        </tr>
        <tr>
          <td><span class="label label-info">Info</span></td>
          <td><code>.label-info</code></td>
        </tr>
        <tr>
          <td><span class="label label-warning">Warning</span></td>
          <td><code>.label-warning</code></td>
        </tr>
        <tr>
          <td><span class="label label-danger">Danger</span></td>
          <td><code>.label-danger</code></td>
        </tr>
      </tbody>
    </table>
  </article>
</section>
